<template>
    <rx-layout>
        <div slot="left" width="220" showButton="true">
            <rx-fit>
                <rx-category-treeeditor
                    cat-key="FORM"
                    :statisticConfig="statisticConfig"
                    :edit="true"
                    @handSelect="handSelect"
                    :async="true"
                    v-if="isShowManageTree"
                    :isAdmin="isManageToTree"
                    :checkToDel="true"
                ></rx-category-treeeditor>
            </rx-fit>
        </div>
        <div slot="center" style>
            <rx-fit>
                <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
                    <div class="table-operator">
                        <rx-button alias="formLiteFlowAdd" :butn-icon="'plus'" :butn-type="'primary'"
                                   :show-no-right="true" @click="add">{{ $ti18('rxList.newBtn', '新建') }}
                        </rx-button>
                        <a-button @click="design('-1')">{{ i18n('directDesign', '直接设计') }}</a-button>
                        <a-button v-if="selectedRowKeys.length > 0"
                                  type="primary"
                                  icon="switcher" @click="openCategoryDialog">
                            {{ $ti18('rxList.changeCategory', '切换分类') }}
                        </a-button>
                        <a-dropdown
                            v-if="editEnable && selectedRowKeys.length > 0 || removeEnable && selectedRowKeys.length > 0">
                            <a-button style="margin-left: 8px"> {{ $ti18('rxList.moreBtn', '更多') }}
                                <a-icon type="down"/>
                            </a-button>
                            <a-menu slot="overlay">
                                <a-menu-item key="2" v-if="removeEnable && selectedRowKeys.length > 0"
                                             alias="formLiteFlowDelete" :butn-icon="'delete'" :butn-type="'danger'"
                                             :show-no-right="false" @click="delByIds(selectedRowKeys)">
                                    <a-icon type="delete"/>
                                    {{ $ti18('rxList.delBtn', '删除') }}
                                </a-menu-item>
                            </a-menu>
                        </a-dropdown>
                    </div>
                    <span class="search-btn-box">
                        <span class="search-btn" @click="searchshow"><i
                            class="iconfont iconguolv"></i>{{ $ti18('rxList.leachBtn', '过滤') }}</span>
                   </span>
                </div>
                <div slot="searchbar" btnalign="right" v-if="fitSearch" @search="search" @cancel="cancel"
                     @close="close">
                    <a-form layout="vertical">
                        <a-form-item :label="i18n('chainDesc','规则描述')">
                            <a-input :placeholder="i18n('chainDesc','请输入规则描述','input')"
                                     v-model="queryParam.Q_CHAIN_DESC__S_LK"/>
                        </a-form-item>
                        <a-form-item :label="i18n('chainName','规则别名')">
                            <a-input :placeholder="i18n('chainName','请输入规则别名','input')"
                                     v-model="queryParam.Q_CHAIN_NAME__S_LK"/>
                        </a-form-item>
                    </a-form>
                </div>
                <rx-grid
                    ref="table"
                    :allowRowSelect="true"
                    :multiSelect="true"
                    :columns="columns"
                    :defaultPageSize="10"
                    url="/api-form/form/core/formLiteFlow/query"
                    :queryParam="queryParam"
                    data-field="result.data"
                    :pageSizeOptions="['10','30','40']"
                    id-field="id"
                    @selectChange="onSelectChange"
                >
                    <span slot="enabled" slot-scope="{text,record, index}">
                       <a-tag :color="statusMap[text].color">
                                <span>{{ statusMap[text].text }}</span>
                       </a-tag>
                     </span>
                    <span slot="action" slot-scope="{ text, record }" class="actionIcons" :size="2">
                        <span @click="design(record.id)">{{ i18n('design', '设计') }}</span>
                        <span v-if="record.rule" @click="uploadEnabled(record)">
                            {{ record.enabled == 1 ? i18n('disable', '禁用') : i18n('enable', '启用') }}
                        </span>
                        <span @click="edit(record)">{{ $ti18('rxList.editBtn', '编辑') }}</span>
                        <span :title="i18n('list.genExternalApi','生成对外接口')"
                              @click.stop="genExternalApi([record])">
                            {{ i18n('list.genExternalApi', '生成对外接口') }}
                        </span>
                        <span @click="getLogs(record.id)">{{ i18n('logs', '日志') }}</span>
                        <span @click="delByIds([record.id])">{{ $ti18('rxList.delBtn', '删除') }}</span>
                      </span>
                </rx-grid>
            </rx-fit>
        </div>
    </rx-layout>
</template>

<script>
import FormLiteFlowApi from '@/api/form/core/formLiteFlow'
import {BaseList, RxFit, RxGrid, Util} from "@lowcode/jpaas-common-lib";
import RxCategoryTreeeditor from "@/components/redxun/rx-category-treeeditor";
import FormLiteFlowEdit from "@/views/modules/form/core/FormLiteFlowEdit";
import FormLiteFlowLogList from "@/views/modules/form/core/FormLiteFlowLogList.vue";
import ChangeCategory from "@/views/modules/share/ChangeCategory.js"
import SysExternalApiApi from "@/api/system/core/sysExternalApi";

export default {
    name: 'FormLiteFlowList',
    mixins: [BaseList, ChangeCategory],
    components: {
        RxFit,
        RxGrid,
        RxCategoryTreeeditor
    },
    data() {
        return {
            columns: [
                {
                    title: this.$ti18('rxList.index', '序号'),
                    type: 'indexColumn',
                    width: 60,
                    dataIndex: 'serial',
                    scopedSlots: {customRender: 'serial'}
                },
                {title: this.i18n('chainName', '规则别名'), dataIndex: 'chainName', width: 140},
                {title: this.i18n('chainDesc', '规则描述'), dataIndex: 'chainDesc', width: 180},
                {
                    title: this.i18n('enabled', '启用'),
                    dataIndex: 'enabled',
                    width: 80,
                    scopedSlots: {customRender: 'enabled'}
                },
                {title: this.$ti18('rxForm.createTime', '创建时间'), dataIndex: 'createTime', width: 140},
                {
                    title: this.$ti18('rxList.action', '操作'),
                    width: 100,
                    dataIndex: 'action',
                    scopedSlots: {customRender: 'action'}
                }
            ],
            component: FormLiteFlowEdit,
            comment: this.i18n('formLiteFlow', "规则引擎定义"),
            max: true,
            fitSearch: false,
            statusMap: {
                "1": {color: 'green', text: this.$ti18('rxList.yes', '是')},
                "0": {color: 'red', text: this.$ti18('rxList.no', '否')},
            },
            statisticConfig: {
                type: "static_form",
                table: "FORM_LITE_FLOW t",
                field: "TREE_ID_",
            },
            //变更分类配置
            categoryConfig: {
                Api: FormLiteFlowApi,
                catKey: "FORM",
                gridRef: "table"
            }
        }
    },
    created() {
        this.isUserManager(this.$route.query.appId);
        this.needFilterAppId("isAppMenu");

        this.$broadCast.onmessage = (event) => {
            /*从liteFlow和弹窗里面触发*/
            /*刷新表单设计里面的JS脚本中插入的弹窗*/
            if (event.data === 'formDesign' && this.$refs.table) {
                this.$refs.table.loadData()
            }
        }

    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formLiteFlow", key);
        },
        handSelect(curRow) {
            this.curTree = curRow
            var treeId = curRow.treeId;
            let params = {
                Q_TREE_ID__S_EQ: ""
            }
            if (treeId != "0") {
                params.Q_TREE_ID__S_EQ = treeId;
            } else {
                params.Q_TREE_ID__S_EQ = "";
            }
            this.loadData(params)
        },
        genExternalApi(selectedRows) {
            if (!selectedRows || selectedRows.length == 0) {
                this.$message.warning(this.i18n('msg.leastOne', '请至少选择一条数据!'));
                return;
            }
            var ary = [];
            for (let i = 0; i < selectedRows.length; i++) {
                ary.push(selectedRows[i].chainName);
            }
            this.selectCategory("EXTERNAL_API", function (categoryId) {
                SysExternalApiApi.genExternalApi({alias: ary.join(","), type: "liteFlow", categoryId: categoryId});
            });
        },
        delById(ids) {
            return FormLiteFlowApi.del({ids: ids.join(',')});
        },
        getListByParams(parameter) {
            return FormLiteFlowApi.query(parameter)
        },
        design(pkId) {
            let url = "/liteFlow/" + pkId;
            if (this.curApp && this.curApp.appId) {
                url += "?appId=" + this.curApp.appId;
            }
            window.open(url, "_blank");
        },
        uploadEnabled(record) {
            FormLiteFlowApi.uploadEnabled(record.id).then(res => {
                this.loadData();
            });
        },
        getLogs(id) {
            Util.open({
                curVm: this,
                max: true,
                title: this.i18n('logs', '日志'),
                component: FormLiteFlowLogList,
                data: {
                    liteFlowId: id
                }
            })
        }
    }
}
</script>
<style scoped>
.table-operator {
    padding: 4px;
}

.table-operator button {
    margin: 2px;
}
</style>

